@font-face {
	font-family: 'iconfont';  /* project id 2336002 */
	src: url('//at.alicdn.com/t/font_2336002_bcx52bpi5f8.eot');
	src: url('//at.alicdn.com/t/font_2336002_bcx52bpi5f8.eot?#iefix') format('embedded-opentype'),
	url('//at.alicdn.com/t/font_2336002_bcx52bpi5f8.woff2') format('woff2'),
	url('//at.alicdn.com/t/font_2336002_bcx52bpi5f8.woff') format('woff'),
	url('//at.alicdn.com/t/font_2336002_bcx52bpi5f8.ttf') format('truetype'),
	url('//at.alicdn.com/t/font_2336002_bcx52bpi5f8.svg#iconfont') format('svg');
  }
  
  * {
	  padding: 0;
	  margin: 0;
	  font-family: 'Microsoft Jhenghei', Lantinghei SC, 'lanting', PingFang SC, Seguo UI, Microsoft Yahei, Arial;
	  /* transition: all .2s; */
  }
  
  body {
	  display: flex;
	  align-items: center;
	  flex-direction: column;
	  background-color: var(--background);
	  /* padding: 0px !important; */
  }
  
  /* 顶部导航栏 */
  .nav {
	  width: 100%;
	  height: 80px;
	  /* background-color: #FFFFFF; */
	  display: flex;
	  align-items: center;
  }
  
  .navLeft {
	  display: flex;
	  flex: 3;
  }
  
  .navRight {
	  display: flex;
	  align-items: center;
	  justify-content: flex-end;
	  flex: 1;
  }
  
  .nav .navLeft a#avatar {
	  padding-left: 6vw;
	  text-decoration: none;
	  color: var(--textColor);
	  font-size: 24px;
	  font-weight: 900;
	  font-family: sans-serif;
	  transition: all 0.2s;
	  margin-right: 6vh;
  }
  
  .nav .navLeft a#avatar:hover {
	  color: #007DDB;
  }
  
  .nav .navLeft a#avatar:hover+.showMsg {
	  display: block;
  }
  
  .nav .navLeft a.links {
	  text-decoration: none;
	  color: var(--textColor);
	  padding: 5px 10px;
  }
  .nav .navLeft a.links:hover {
	  color: #007DDB;
  }
  
  .nav .navLeft>.showMsg {
	  display: none;
	  position: fixed;
	  left: calc(6vw + 110px);
	  width: auto;
	  height: auto;
	  color: #FFFFFF;
	  background-color: #3f3f3f;
	  padding: 6px 8px;
  }
  
  
  .nav .navLeft>.showMsg::before {
	  content: " ";
	  display: block;
	  width: 0;
	  height: 0;
	  border-top: 6px solid transparent;
	  border-bottom: 6px solid transparent;
	  border-right: 6px solid #4e4e4e;
	  position: absolute;
	  left: -6px;
	  top: 10px;
  }
  
  /* 搜索输入框 (移动端 & pc) */
  
  .searchbar:after {
	  content: "";
	  clear: both;
	  display: table
  }
  
  .searchbar form {
	  width: auto;
	  float: right;
	  margin-right: 30px;
  }
  
  .searchbar input {
	  color: var(--textColor);
	  width: 200px;
	  min-width: 150px;
	  height: 32px;
	  padding-left: 15px;
	  border-radius: 42px;
	  border: 2px solid #324b4e;
	  outline: none;
	  position: relative;
	  transition: .2s linear;
	  background-color: transparent;
  }
  
  .searchbar input:focus {
	  /* width: 250px; */
	  box-shadow: 2px 2px 4px #808080;
  }
  
  .searchbar button {
	  width: 42px;
	  height: 42px;
	  background: none;
	  border: none;
	  position: absolute;
	  top: -3px;
	  right: 0;
	  outline: none;
	  cursor: pointer;
  }
  
  .searchbar button:active {
	  opacity: 0.6;
  }
  
  .searchbar button:before {
	  content: "\e603";
	  font-family: "iconfont" !important;
	  font-size: 16px;
	  font-style: normal;
	  color: #324b4e;
  }
  
  @media only screen and (max-width:768px)  {
	  .searchbar input:focus {
		  width: 200px;
	  }
  }
  
  div.search {
	  padding-right: 6vw;
  }
  
  div.form {
	  position: relative;
	  margin: 0 auto;
  }
  
  /* container */
  .container {
	  overflow: hidden;
  }
  
  .body {
	  /* transform: translateX(300px); */
	  width: 100vw;
	  min-height: 100vh;
	  transition: transform .4s; 
  }
  
  .body-hide {
	  transform: translateX(300px);
  }
  
  .body>main {
	  width: 100vw;
	  min-height: calc(73vh - 168px);
  }
  
  /* 侧边栏 */
  .navigation-bar-mobile {
	  background-color: var(--background1);
	  position: fixed;
	  transform: translateX(-300px);
	  left: 0px;
	  top: 0px;
	  width: 300px;
	  min-height: 100vh;
	  flex-direction: column;
	  display: flex;
	  /* display: none; */
	  align-items: center;
	  overflow: hidden;
	  transition: all 0.4s;
	  z-index: 1;
  }
  
  .navigation-bar-mobile>a {
	  width: 100px;
	  height: 100px;
	  margin: 8vh 0 4vh 0;
  }
  
  .navigation-bar-mobile img {
	  object-fit: cover;
	  object-position: center center;
	  border-radius: 50%;
	  box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 4px;
  }
  
  .navigation-bar-mobile>ul {
	  margin-top: 3vh;
	  list-style: none;
	  padding-left: 0;
  }
  .navigation-bar-mobile>ul>li {
	  font-family: "iconfont" !important;
	  width: 60vw;
	  /* background-color: #F6F6F6; */
	  background-color: var(--background1);
	  text-align: center;
	  padding: 20px 0;
	  transition: all .1s;
  }
  .navigation-bar-mobile>ul>li:hover {
	  background-color: var(--background2);
  }
  .navigation-bar-mobile>ul>li>a {
	  text-decoration: none;
	  color: var(--textColor);
	  padding: 20px calc(20vw - 18px) ;
	  font-size: 18px;
  }
  
  .navigation-bar-mobile-display {
	  transform: translateX(0px) !important;
  }
  
  /* 移动端导航toggleBtn */
  a.toggleBtn-navigator {
	  display: none;
	  position: fixed;
	  left: 20px;
	  top: 5vh;
	  width: 60px;
	  padding: 6px;
	  border-radius: 20px;
	  text-align: center;
	  background-color: transparent;
	  border: 2px solid #CCCCCC;
	  text-decoration: none;
	  color: var(--textColor);
	  font-family: "Open Sans", Helvetica, "Microsoft Yahei", sans-serif;
	  transition: all .4s;
	  z-index: 2;
  }
  
  a.toggleBtn-navigator:hover {
	  background-color: #3F3F3F;
	  border: 2px solid #3F3F3F;
	  color: #FFFFFF;
  }
  
  .toggleBtn-navigator-right {
	  transform: translateX(244px);
  }
  
  .toggleBtn-navigator-left {
	  transform: translateX(-60px);
  }
  
  
  /* 用户信息 */
  #userInfo {
	  display: flex;
	  /* justify-content: center; */
	  align-items: center;
	  flex-direction: column;
  }
  
  #userInfo>a {
	  width: 100px;
	  height: 100px;
	  /* margin: 8vh auto ; */
	  margin-top: 8vh;
	  margin-bottom: 2vh;
	  color: var(--textColor);
  }
  
  #userInfo>.userName {
	  font-size: 30px;
	  color: var(--textColor);
	  font-family: 'Microsoft Jhenghei', Lantinghei SC, 'lanting', PingFang SC, Seguo UI, Microsoft Yahei, Arial;
  }
  
  #userInfo img {
	  object-fit: cover;
	  object-position: center center;
	  border-radius: 50%;
	  /* border: 2px solid #CCCCCC; */
	  box-shadow: rgba(0, 0, 0, 0.05) 0px 0px 0px 4px;
	  /* margin: 0 auto; */
	  transition: all .4s;
  }
  
  #userInfo img:hover{
	  position: relative;
	  -webkit-transform: translateY(-.75em);
	  -moz-transform: translateY(-.75em);
	  -ms-transform: translateY(-.75em);
	  -o-transform: translateY(-.75em);
	  transform: translateY(-.75em);
	  /* cursor: pointer; */
  }
  
  #userInfo .detail {
	  margin-top: 2vh;
  }
  
  #userInfo .detail>a {
	  text-decoration: none;
	  color: var(--textColor);
	  font-size: 24px;
	  margin: 0 10px;
	  transition: all .2s;
  }
  #userInfo .detail>a:hover {
	  color: #007DDB;
  }
  
  /* footer */
  .body>footer {
	  width: 100vw;
	  /* min-height: ; */
	  height: 15vh;
	  /* background-color: aqua; */
	  display: flex;
	  flex-direction: column;
	  align-items: center;
	  justify-content: center;
  }
  
  .body>footer a {
	  text-decoration: none;
	  color: #007DDB;
  }
  
  .body>footer a:hover {
	  opacity: 0.6;
  }
  
  @media only screen and (max-width:768px) {
	  .nav {
		  display: none;
	  }
	  a.toggleBtn-navigator {
		  display: block;
	  }
  }
  
  @media only screen and (min-width:768px) {
	  .navigation-bar-mobile {
		  display: none;
	  }
	  .body {
		  transform: translateX(0);
		  min-height: calc(100vh - 80px);
	  }
	  .body>main{
		  min-height: calc(73vh - 248px);
	  }
  }
  